<template>
    <n-table>
        <thead>
            <tr>
                <th align="center">Team</th>
                <th align="center">Game1</th>
                <th align="center">Game2</th>
                <th align="center">Game3</th>
                <th align="center">Game4</th>
                <th align="center">Game5</th>
                <th align="center">Game5 Extract</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td align="center">{{ teamInfo.team1?.teamName }}</td>
                <template v-for="(_, index) in allScore.team1" :key="index">
                    <td align="center" v-if="index % 2 === 0">
                        <div class="score_board">
                            <p>{{ allScore.team1[index] }}</p>
                            <p>{{ allScore.team1[index + 1] }}</p>
                        </div>
                    </td>
                </template>
            </tr>
            <tr>
                <td align="center">{{ teamInfo.team2?.teamName }}</td>
                <template v-for="(_, index) in allScore.team2" :key="index">
                    <td align="center" v-if="index % 2 === 0">
                        <div class="score_board">
                            <p>{{ allScore.team2[index] }}</p>
                            <p>{{ allScore.team2[index + 1] }}</p>
                        </div>
                    </td>
                </template>
            </tr>
        </tbody>
    </n-table>
</template>

<script setup lang='ts' name="ScoreAllBoard">
defineProps<{
    'allScore': AllScore,
    'teamInfo': Partial<TeamInfo>
}>()
</script>
<style scoped lang='scss'>
.score_board{
    display: flex;
    justify-content: space-around;
    align-items: center;
    p{
        font-weight: bold;
        font-size: 1em;
    }
}
</style>